<template>
  <div class="trace" v-wechat="$route.meta.title">
    <van-form @submit="onSubmit">
      <!-- title -->
      <div class="main">
        <div class="titles">
          <i id="i"></i>
          <h2>{{$t('message.fbcx')}}</h2>
        </div>
        <!-- 条件 -->

        <van-field
          required
          readonly
          clickable
          name="picker"
          :value="value"
          is-link
          :label="$t('message.fbxg')"
          :placeholder="$t('addMsg.p-fbxg')"
          @click="showPicker = true"
          input-align="right"
          :rules="[{pattern,message:$t('addMsg.p-fbxg')}]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          required
          clickable
          v-model="ruleForm.remark"
          label=" "
          :placeholder="$t('addMsg.p-qtqk')"
          input-align="right"
          v-if="value===$t('message.qt')"
          :rules="[{pattern,message:$t('addMsg.p-qtqk')}]"
        />
        <van-field id="sty" :label="$t('message.cgbs')" required readonly />
        <van-field
          rows="3"
          autosize
          v-model="ruleForm.resultDesc"
          type="textarea"
          class="textareas"
          maxlength="512"
          :placeholder="$t('addMsg.p-cgbs')"
          show-word-limit
          :show-error="false"
          name="pattern"
          :rules="[{pattern,message:$t('addMsg.p-cgbs')}]"
        />
        <!-- 上传文件 -->
          <uploadFile ref="uploadFile" :pfileList="cfileList"  class="uploadaa"/>

      </div>
      <!-- 用户信息 -->
      <div class="userInfo">
        <div class="titles">
          <i id="i"></i>
          <h2>{{$t('message.txrxx')}}</h2>
        </div>
        <!-- 输入任意文本 -->
        <van-field
          required
          v-model="ruleForm.filledBy"
          input-align="right"
          :placeholder="$t('message.p-tbr')"
          :label="$t('message.tbr')"
          :rules="[{pattern,message:$t('message.p-tbr')}]"
        />

        <!-- 输入手机号，调起手机号键盘 -->

        <van-field
          v-if="siteLang === 'zh-CN'"
          required
          input-align="right"
          v-model="ruleForm.phone"
          :placeholder="$t('message.p-phone')"
          type="tel"
          :label="$t('message.lxdh')"
          :rules="[{required:true,message:$t('message.m10')}]"
        />

        <van-field
          v-if="siteLang !== 'zh-CN'"
          input-align="right"
          v-model="ruleForm.phone"
          :placeholder="$t('message.p-phone')"
          type="tel"
          :label="$t('message.lxdh')"
          :rules="[{required:true,message:$t('message.m10')}]"
        />
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field
          type="tel"
          input-align="right"
          v-model="ruleForm.seatNumber"
          :placeholder="$t('message.p-tell')"
          :label="$t('message.zjhm')"
          :error-message="errMessageTell"
          @blur="changTell"
        />
      </div>
      <div class="footer">
        <van-button type="info" native-type="submit" round class="btn">{{$t('message.tj')}}</van-button>
        <van-button type="default" native-type="btn" @click="cancel" class="btn">{{$t('message.fh')}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import uploadFile from "@/components/uploadFile";
import Cookie from 'js-cookie';
export default {
  components: {
    uploadFile
  },

  data() {
    return {
      value: "",
	  cfileList:[],
      columns: [
        this.$t("message.hh"),
        this.$t("message.hao"),
        this.$t("message.yb"),
        this.$t("message.qt")
      ],
      rules: {
        userName: { required: true },
        phone: { regExp: /^1[3456789]\d{9}$/, required: true },
        qingkuang: { regExp: /^\s|\S$/, required: true },
        fixed: { regExp: /^(\d+)(.\d{0,2})?$/, required: true },
        tel: { regExp: /^([0][1-9]{2,3}-)?[0-9]{5,10}$/ }
      },
      pattern: /^\s|\S$/,
      list: [
        {
          label: this.$t("message.hh"),
          value: "1"
        },
        {
          label: this.$t("message.hao"),
          value: "2"
        },
        {
          label: this.$t("message.yb"),
          value: "3"
        },
        {
          label: this.$t("message.qt"),
          value: "4"
        }
      ],
      cfileList: [],
      errMessageTell: "",
      ruleForm: {
        id: "",
        publishEffect: "", //发布效果
        remark: "", //其他
        resultDesc: "", //成果描述
        filledBy: "", //填表人
        phone: "", //电话
        seatNumber: "", //座机号
        ossUrlLists: [] //pc上传列表
      },
      showPicker: false
    };
  },
  created() {},
  computed: {
    siteLang () {
      // 设置默认 cookie
      return Cookie.get('site_lang') || 'zh-CN'
    },
  },
  mounted() {
    //   打回回填
    this.$axios
      .get("/api/releaseResultTrack/infoEcho", {
        id: this.$route.query.id
      })
      .then(res => {
        console.log(res);
        if (res.data.code === 200) {
          if (res.data.data) {
            this.ruleForm = res.data.data;
            let [...executionStatus] = this.list.filter((item, index) => {
              if (item.value === this.ruleForm.publishEffect) {
                return item;
              }
            });
			this.cfileList = this.ruleForm.ossUrlList
            this.value = executionStatus[0].label;
          }
        } else {
          this.$message.error(res.data.message);
        }
      })
      .catch(err => {
        console.log(err);
        this.$toast(err.message);
      });
  },
  methods: {
    // 最大长度
    asyncReleaseTitleCnengValidator(val) {
      return new Promise(resolve => {
        if (val.length >= 128) {
          resolve(false);
        }
      });
    },
    // 验证英文
    asyncReleaseTitleCnValidator(val) {
      return new Promise(resolve => {
        const reg = /^[a-zA-Z]+$/g;
        resolve(!reg.test(val));
      });
    },
    // 验证英文
    asyncValidator(val) {
      return new Promise(resolve => {
        const reg = /[\u4e00-\u9fa5]/;
        resolve(!reg.test(val));
      });
    },
    //   验证座机号
    changTell() {
      console.log();
      if (/^(\d{3,4}-)?\d{7,8}$/i.test(this.ruleForm.seatNumber)) {
        this.errMessageTell = "";
        return true;
      } else if (!this.ruleForm.seatNumber) {
        return true;
      } else {
        this.errMessageTell = this.$t("message.m11");
        return false;
      }
    },
    // 选择框取值
    onConfirm(value) {
      this.value = value;
      let [...publishEffect] = this.list.filter((item, index) => {
        if (item.label === value) {
          return item;
        }
      });
      console.log(publishEffect[0].value);
      this.ruleForm.publishEffect = publishEffect[0].value;
      this.showPicker = false;
    },
    // 追踪提交
    onSubmit() {
      let ossUrlLists = [];
      if (this.$refs.uploadFile.fileList.length !== 0) {
        ossUrlLists = this.$refs.uploadFile.fileList;
      }
	 this.ruleForm.ossUrlList = ossUrlLists
      this.$axios
        .post("/api/releaseResultTrack/submit", {
          ...this.ruleForm,
          rid: this.$route.query.id
        })
        .then(res => {
          console.log(res);

          if (res.data.code === 200) {
            this.$toast(this.$t("message.czcg"));
            setTimeout(() => {
              this.$router.push({
                path: "/home",
                query: {}
              });
            }, 500);
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(err => {
          console.log(err);
          this.$toast(err.message);
        });
    },
    // 取消
    cancel() {
      this.$router.push({
        path: "/home"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.trace {
  height: 100%;
  background: transparent;
  padding: 15px 15px 0;
  overflow: auto;
}
.main {
  background: #fff;
  padding: 0 15px 17px;
  border-radius: 8px;
  .update {
    color: #999999;
    font-size: 12px;
    .up {
      width: 102px;
      min-height: 32px;
      margin: 20px 0 9px;
      color: #fff;
      font-size: 14px;
    }
  }
}
.userInfo {
  margin-top: 10px;
  background: #fff;
  padding: 0 15px;
  border-radius: 8px;
}
.textareas {
  border: 1px solid #e6e9ee;
  border-radius: 5px;
  /*width:95%;*/
  /*height:110px;*/
  /*margin:0 auto;*/
}
.titles {
  height: 47px;
  font-size: 14px;
  line-height: 48px;
  font-family: PingFangHK-Medium;
  color: #212121;
  display: flex;
  align-items: center;
  i#i {
    width: 5px;
    height: 15px;
    background: #ffbc3a;
  }
  h2 {
    margin-left: 6px;
  }
}
#sty.van-field__control {
  border: none !important;
}
.footer {
  margin-top: 48px;
  padding: 0 15px;
  .btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    margin-bottom: 15px;
    border-radius: 20px;
  }
  .btn:first-child {
    background-image: linear-gradient(90deg, #fecf47 0%, #ffbc39 100%);
    border: none;
  }
  .btn:last-child {
    border: 1px solid #ccc;
  }
}
.uploadaa {
  margin-top: -16px;
}
</style>
